<template>
  <div
    class="featured-topic"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="carousel">
      <img
        v-for="(item, index) in bannerData"
        :key="index"
        :src="`/api/frontend/file/download/${item.fileId}`"
        v-show="index === activeIndex"
        @click="handleBannerClick(bannerData[activeIndex])"
      />

      <div class="carousel-indicators">
        <div
          class="carousel-indicators-title"
          @click="handleBannerClick(bannerData[activeIndex])"
        >
          {{ bannerData[activeIndex]? bannerData[activeIndex].featureName  :''}}
        </div>
        <div class="indicators-wrapper">
          <div
            class="indicator-dot"
            v-for="(item, index) in bannerData"
            :key="index"
            :class="{ active: index === activeIndex }"
            @click="handleIndicatorClick(index, item)"
          ></div>
        </div>
      </div>
    </div>

    <div class="news-list">
      <div
        class="news-item"
        v-for="(item, index) in ResourceList"
        :key="item.title"
        @mouseenter="hoverIndex = index"
        @mouseleave="hoverIndex = 0"
      >
        <span
          :class="['news-title', { 'news-title-active': index === hoverIndex }]"
          :title="item.Content"
          >{{ item.Content }}</span
        >
        <span
          v-if="index === hoverIndex"
          class="news-content"
          :title="item.summary"
        >
          {{
            item.summary
          }}欣赏欣赏欣赏就是嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻小说家戏剧家数学教师学生积极
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/service/service";

export default {
  name: "FeaturedTopic",
  data() {
    return {
      bannerData: [],
      ResourceList: [],
      activeIndex: 0,
      autoPlayTimer: null,
      featureId: "",
      autoPlay: true,
      hoverIndex: 0,
    };
  },
  methods: {
    // 特色主题
    async getFeaturedTopic() {
      const res = await service({
        url: "/frontend/index/featureList",
        method: "post",
        data: {
          pageNo: 1,
          pageSize: 10,
        },
      });
      if (res.code === 200) {
        console.log(res, "特色主题");
        this.bannerData = res.data.list;
        this.featureId = res.data.list[0].featureId;
      } else {
        this.$message.error(res.msg || "数据获取失败");
      }
    },
    // 专题下资源列表-只用于首页展示
    async getTopicResourceList() {
      const res = await service({
        url: "/frontend/index/featureResourceList",
        method: "post",
        data: {
          pageNo: 1,
          pageSize: 5,
          featureId: this.featureId,
        },
      });
      if (res.code === 200) {
        console.log(res, "专题下资源列表");
        this.ResourceList = res.data.list.map((item) => {
          return {
            ...item,
            Content: `[${item.resourceTag?.tagName || ''}${item.resourceTag?.tagName && item.type?.typeName ? ' | ' : ''}${item.type?.typeName || ''}] ${item.title}`



          };
        });
      } else {
        this.$message.error(res.msg || "数据获取失败");
      }
    },
    // 切换到指定索引的图片
    switchBanner(index) {
      this.activeIndex = index;
    },
    // 点击指示器切换图片
    handleIndicatorClick(index, row) {
      this.featureId = row.featureId;
      this.switchBanner(index);
      this.resetAutoPlay();
      this.getTopicResourceList();
    },
    // 自动切换到下一张
    autoPlayNext() {
      this.activeIndex = (this.activeIndex + 1) % this.bannerData.length;
      this.featureId = this.bannerData[this.activeIndex].featureId;
      this.getTopicResourceList();
    },
    // 重置定时器
    resetAutoPlay() {
      clearInterval(this.autoPlayTimer);
      this.startAutoPlay();
    },
    // 启动定时器（自动轮播）
    startAutoPlay() {
      if (!this.autoPlay) return;
      this.autoPlayTimer = setInterval(() => {
        this.autoPlayNext();
      }, 10000); // 改为10秒
    },
    // 停止自动轮播
    stopAutoPlay() {
      clearInterval(this.autoPlayTimer);
    },
    // 鼠标进入
    handleMouseEnter() {
      this.stopAutoPlay();
    },
    // 鼠标离开
    handleMouseLeave() {
      this.startAutoPlay();
    },
    // 点击新闻条目
    handleNewsClick(item) {
      this.$router.push({
        path: "/DetailsPage",
        query: {
          id: item.id,
        },
      });
    },
    // 点击专题封面或标题
    handleBannerClick(item) {
      this.$router.push({
        path: "/HotTopicDetail",
        query: {
          id: item.featureId,
        },
      });
    },
  },
  async mounted() {
    await this.getFeaturedTopic();
    this.getTopicResourceList();
    this.startAutoPlay();
  },
  beforeDestroy() {
    clearInterval(this.autoPlayTimer);
  },
};
</script>

<style lang="scss" scoped>
.featured-topic {
  width: 1400px;
  display: flex;
  padding-top: 21px;
  height: 463px;
  border-top: 1px solid #e4e4e4;

  .carousel {
    position: relative;
    width: 806px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      cursor: pointer;
    }

    .carousel-indicators {
      position: absolute;
      bottom: 0px;
      width: 806px;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      display: flex;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 0px 0px 8px 8px;

      .carousel-indicators-title {
        margin-left: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28px;
        color: #ffffff;
        cursor: pointer;
      }

      .indicators-wrapper {
        margin-right: 20px;
        display: flex;

        .indicator-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #fff;
          opacity: 0.6;
          transition: opacity 0.3s;
          margin: 4px;
          cursor: pointer;
          &.active {
            opacity: 1;
            transform: scale(1.2);
          }
        }
      }
    }
  }

  .news-list {
    width: 558px;
    margin-left: 24px;

    .news-item {
      display: flex;
      flex-direction: column;
      padding: 15px 0;
      border-bottom: 1px solid #e4e4e4;

      .news-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        cursor: pointer;

        &:hover {
          color: #327dff;
        }
      }

      .news-title-active {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        cursor: pointer;

        &:hover {
          color: #327dff;
        }
      }

      .news-content {
        margin-top: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
